
//细节一

// jsx元素写法有两种：
// jsx的形式
// React.createElement的形式

/*
//jsx是用来给组件提供视图模板的
let box = (
    <div>
        <h1>hello react</h1>
    </div>
)

function DemoA(){
    return box
}

export default DemoA
*/

//jsx元素是可选的，写组件时，可以使用它
/*jsx，翻译成React.createElement写法
import React from "react";
function DemoA(){
    return React.createElement(
        'div',
        {},
        [
            React.createElement('h1',{key:1},['Hello React'])
        ]
    )
}

export default DemoA;
*/

//细节二

//1.为什么人家在设计jsx元素时，设计成不可变对象呢？
//  因为jsx最终需要被渲染成真实的DOM元素,所以不能直接操作"原材料",只能使用它

//2. 什么是jsx元素，什么是组件？
//  由class或function定义出来的叫组件，组件名必须大写
//  由jsx语法或者React.createElement返回的结果叫jsx元素,jsx元素充当组件的视图模板


//细节三

//在jsx元素中，你要嵌套表达式，必须使用{}包起来,也就是说,在jsx元素中,
// 看到{}你要知道里面放的都是表达式。任何有值的内容都是表达式

// import React from "react";
// let a = 110;
// function foo(user){
//     return `${user.firstName} ${user.lastName}`
// }

// function DemoA(){
//     return (
//         <div>
//             {/* {}放的是表达式，只要是值，都可以放在{}中 */}
//             <h3>{a+110}</h3>
            
//             <h3>{foo({firstName:'wang',lastName:'cai'})}</h3>
//         </div>
//     )
// }
// export default DemoA;

/*
//细节四
//jsx也可以做为函数的入参，也就是在调用一个函数时，
//  传递传递一个jsx元素，也可以做为函数的返回值，还可以用在if或for中
import React from "react";
//foo是一个普通的函数
function foo(arg){
    if(arg){
        return <div>{arg}</div>
    }else{
        return <div>我是默认值</div>
    }
}
let ele = <strong>我是strong</strong>
function DemoA(){
    return(
        <div>
            <h3>{foo(110)}</h3>
            <h3>{foo()}</h3>
            <h3>{foo('hello')}</h3>
            <h3>{foo(<span>我是一个span</span>)}</h3>
            <h3>{foo(ele)}</h3>
        </div>
    )
}
export default DemoA;
*/

/*
细节五
    jsx元素中有三个变化的属性
        class变成了className
        for变成了htmlFor
        tabindex变成了tabIndex
*/

/*
//细节六
//jsx元素中新增了三个属性
//  1.key用于列表渲染
//  2.ref方便DOM操作
//  3.dangerouslySetInnerHTML用来渲染一片html字符串  

import React from "react";
let ele = '<div><a href="http://baidu.com">码路</a></div>';
function DemoA(){
    return(
        <div>
            {ele}
            <hr />
            <div dangerouslySetInnerHTML={{__html:ele}}></div>
        </div>
    )
}
export default DemoA;
*/

/*
//细节七
//  jsx只能（必须）有一个根标签
*/

/*
//细节八
//  在jsx元素，不仅组件可以使用单表签，任何html标签都可以
*/

/*
//细节九
// 在jsx中写行内样式，格式如下：
    <div style={{key1:'value1',key2:'value2'}}></div>

// 在jsx中，写class类名，格式如下：
    <div className="box"></div>   //box是写死的
*/

/*
//细节十
    jsx中所有react组件(由class或function定义)的名称必须以大写字母开头
*/

//细节十一
//  jsx语法中是支持点语法的

/* 首字母建议大写
import React from "react";
const Ml = {
    //Button是一个组件
    Button(){
        return (<button>点我</button>)
    },
    Form(){
        return (<div>Form</div>)
    }
}
function DemoA(){
    return(
        <div>
            <Ml.Button></Ml.Button>
            <Ml.Form></Ml.Form>
        </div>
    )
}
export default DemoA;
*/

/*还可以解构
import React from "react";
const Ml = {
    //Button是一个组件
    Button(){
        return (<button>点我</button>)
    },
    Form(){
        return (<div>Form</div>)
    }
}
function DemoA(){
    let {Button,Form} = Ml;
    return(
        <div>
            <Button></Button>
            <Form></Form>
        </div>
    )
}
export default DemoA;
*/

//细节十二
/*
import React from "react";

function Child(props){
    let {name,age,address} = props;
    return(
        <div>
            {name}:{age}:{address}
        </div>
    )
}

function DemoA(){
    let data = {
        name:"wc",
        age:18,
        address:"bj"
    }
    return(
        <div>
            <Child name={data.name} age={data.age} address={data.address}></Child>
        </div>
    )
}

export default DemoA;
*/































